<template>
  <div>
    <!-- 本页面存在两个Tab -->
    <el-tabs v-model="activeName">
      <!-- 显卡显示的Pane -->
      <el-tab-pane label="显卡信息查看" name="info">
        <!-- 绑定数组，遍历显示 -->
        <el-table :data="gpuInfo" style="width: 100%">
          <!-- 品牌列 -->
          <el-table-column prop="brand.name" label="品牌"/>
          <el-table-column label="型号（点击查看图片）" min-width="150px">
            <template slot-scope="scope">
              <!--  trigger可改变预览图片的打开方式 -->
              <el-popover trigger="hover" placement="top">
                <img :src="scope.row.imgUrl" width="480" alt="无图片">
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.type }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="显存大小">
            <!-- 插入scope以添加后缀 -->
            <template slot-scope="scope">
              {{ scope.row.size }} GB
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="库存"/>
          <el-table-column label="操作" fixed="right" min-width="150px">
            <template slot-scope="scope">
              <el-button size="mini" @click="showEdit(scope.$index)">编辑</el-button>
              <el-button size="mini" type="danger" @click="del(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="显卡信息" name="add">
        <el-radio-group v-model="labelPosition" size="small">
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
          <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
        <div style="margin: 20px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="form">
          <el-form-item label="显卡品牌">
            <el-select v-model="form.brand.id" placeholder="请选择品牌">
              <el-option v-for="brand in brands" :key="brand.id" :label="brand.name" :value="brand.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="型号">
            <el-input v-model="form.type"></el-input>
          </el-form-item>
          <el-form-item label="显存大小">
            <el-input v-model="form.size"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="form.consumerPrice"></el-input>
          </el-form-item>
          <el-form-item label="图片网址">
            <el-input v-model="form.imgUrl"></el-input>
          </el-form-item>
          <el-button type="primary" @click="save()">确定</el-button>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gpuInfo: [{ imgUrl: '' }],
      brands: [],
      name: '3080ti',
      activeName: 'info',
      labelPosition: 'right',
      form: { id: 0, size: '', consumerPrice: '', brand: { id: 1, name: '' }, stock: 0, imgUrl: '' }
    }
  },
  created() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      const that = this
      this.$http.get('/gpu/all').then(result => this.gpuInfo = result.data)
        .then(() => console.log(this.gpuInfo))
      this.$http.get('/gpu/brand/all').then(e => {
        that.brands = e.data
      })
    },
    save() {
      this.$http.post('/gpu/', this.form).then(() => {
        this.$router.go(0)
      })
    },
    showEdit(index) {
      this.form = this.gpuInfo[index]
      this.activeName = 'add'
    },
    del(index) {
      this.$http.delete('/gpu/' + this.gpuInfo[index].id)
      this.refreshData()
    }
  }
}
</script>
